<template>
  <transition name="slide">
    <div class="keyboard animated" v-show="show" @touchstart.stop.prevent="fn">
      <!-- 完成 按钮-->
<!--       <div class="done">
        <p class="text" @touchstart="complete">完成</p>
      </div> -->
      <!-- 键盘区域 -->
      <div class="list">
        <div class="key" @touchstart="typing('1')" v-if="isMobile">1</div>
        <div class="key" @click="typing('1')" v-else>1</div>
        <div class="key" @touchstart="typing('2')" v-if="isMobile">2</div>
        <div class="key" @click="typing('2')" v-else>2</div>
        <div class="key" @touchstart="typing('3')" v-if="isMobile">3</div>
        <div class="key" @click="typing('3')" v-else>3</div>
        <div class="key" @touchstart="typing('4')" v-if="isMobile">4</div>
        <div class="key" @click="typing('4')" v-else>4</div>
        <div class="key" @touchstart="typing('5')" v-if="isMobile">5</div>
        <div class="key" @click="typing('5')" v-else>5</div>
        <div class="key" @touchstart="typing('6')" v-if="isMobile">6</div>
        <div class="key" @click="typing('6')" v-else>6</div>
        <div class="key" @touchstart="typing('7')" v-if="isMobile">7</div>
        <div class="key" @click="typing('7')" v-else>7</div>
        <div class="key" @touchstart="typing('8')" v-if="isMobile">8</div>
        <div class="key" @click="typing('8')" v-else>8</div>
        <div class="key" @touchstart="typing('9')" v-if="isMobile">9</div>
        <div class="key" @click="typing('9')" v-else>9</div>
        <div class="key" @touchstart="typing('.')" v-if="isMobile">.</div>
        <div class="key" @click="typing('.')" v-else>.</div>
        <div class="key" @touchstart="typing('0')" v-if="isMobile">0</div>
        <div class="key" @click="typing('0')" v-else>0</div>
        <div class="key" @touchstart="typing('')" v-if="isMobile">
          --
          <!-- <i class="iconfont icon-keyboard-delete del"></i> -->
        </div>
        <div class="key" @click="typing('')" v-else>del</div>
      </div>
    </div>
  </transition>
</template>

<script>
  export default {
    data() {
      return {
        isMobile: true
      }
    },
    props: {
      show: true
    },
    created() { // 判断浏览器是移动设备还是PC
      let flg = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
      if (!flg)
        this.isMobile = false;
    },
    methods: {
      /*防止点击完成按钮左边的空白区域收起键盘*/
      fn() {},
      /*输入*/
      typing (val) {
        this.$emit('typing', val);
      },
      /*点击完成*/
      complete () {
        this.$emit('complete');
      } 
    }
  }
</script>

<style scoped lang="less">
  .keyboard {
    height: 200px;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    background: white;
    z-index: 999;
    .done {
      height: 50px;
      background: #f9f9f9;
      border: .5px solid #d6d6d6;
      border-right: none;
      border-left: none;
      padding-right: 10px;
      border-bottom: none;
      display: flex;
      align-items: center;
      justify-content: flex-end;

      .text {
        color: #007eff;
      }
    }
    .list {
      height: 200px;
      .key:active {
        background: #e2e2e2;
      }
      .key {
        height: 25%;
        width: 33.33%;
        float: left;
        border-right: .5px solid #d6d6d6;
        border-top: .5px solid #d6d6d6;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 30px;
      }
      .key:nth-child(3n) {
        border-right: none;
      }
    }
  }
  .del {
    font-size: 28px;
  }
  .animated {
    animation-duration: .2s;
    animation-fill-mode: both;
  }
  @keyframes slideInDown {
    from {
      transform: translate3d(0, 0, 0);
      visibility: visible;
    }
    to {
      transform: translate3d(0, 100%, 0);
      display: none;
    }
  }
  @keyframes slideInUp {
    from {
      transform: translate3d(0, 100%, 0);
      visibility: visible;
    }
    to {
      transform: translate3d(0, 0, 0);
    }
  }
  .slide-enter-active {
    animation-name: slideInUp;
  }
  .slide-leave-active {
    animation-name: slideInDown;
  }
</style>